<template>
    <div class="account-report-box" v-loading="loading">
        <ul class="account-report-top">
            <li>
                <p class="info-title">昨日使用次数</p>
                <p class="info-con">{{ item.yesterday.useCount }}</p>
                <p class="info-title">累计使用次数</p>
                <p class="info-con">{{ item.all.useCount }}</p>
            </li>
            <li>
                <p class="info-title">昨日出租时长</p>
                <p class="info-con" v-if="item.yesterday.useTime < 60">{{ (item.yesterday.useTime / 60).toFixed(0) }}分钟</p>
                <p class="info-con" v-else>{{ (item.yesterday.useTime / 60 / 60).toFixed(0) }}小时</p>
                <p class="info-title">累计出租时长</p>
                <p class="info-con" v-if="item.all.useTime < 60">{{ (item.all.useTime / 60).toFixed(0) }}分钟</p>
                <p class="info-con" v-else>{{ (item.all.useTime / 60 / 60).toFixed(0) }}小时</p>
            </li>
            <li>
                <p class="info-title">昨日金币收益</p>
                <p class="info-con" v-if="item.yesterday.goldEarnings < 10000">{{ item.yesterday.goldEarnings }}</p>
                <p class="info-con" v-else>{{ (item.yesterday.goldEarnings / 10000).toFixed(2) }}万</p>
                <p class="info-title">累计金币收益</p>
                <p class="info-con" v-if="item.all.goldEarnings < 10000">{{ item.all.goldEarnings }}</p>
                <p class="info-con" v-else>{{ (item.all.goldEarnings / 10000).toFixed(2) }}万</p>
            </li>
            <li>
                <p class="info-title">昨日贡献</p>
                <p class="info-con">{{ item.yesterday.contribution }}趣宝石</p>
                <p class="info-title">累计贡献</p>
                <p class="info-con">{{ item.all.contribution }}趣宝石</p>
            </li>
            <li>
                <p class="info-title">昨日总进账</p>
                <p class="info-con">{{ item.yesterday.income }}趣宝石</p>
                <p class="info-title">累计总进账</p>
                <p class="info-con">{{ item.all.income }}趣宝石</p>
            </li>
        </ul>
        <div class="account-info-bottom">
            <el-select class="type-select" @change="typeChange" style="width:100px;" v-model="typeSelectValue">
                <el-option label="收益(万)" value="earnings"></el-option>
                <el-option label="次数" value="count"></el-option>
                <el-option label="时长(时)" value="time"></el-option>
            </el-select>
            <el-select class="time-select" @change="timeChange" style="width:80px;" v-model="timeSelectValue">
                <el-option label="按周" value="days"></el-option>
                <el-option label="按月" value="weeks"></el-option>
                <el-option label="按年" value="months"></el-option>
            </el-select>
            <div :id="id" class="echarts"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        id: null,
        item: null
    },
    data () {
        return {
            typeSelectValue: 'earnings',
            timeSelectValue: 'days',
            typeValue: '收益',
            myChart: null,
            echartsX: {
                days: [],
                weeks: [],
                months: []
            },
            echartsXData: {
                earnings: {
                    days: [],
                    weeks: [],
                    months: []
                },
                count: {
                    days: [],
                    weeks: [],
                    months: []
                },
                time: {
                    days: [],
                    weeks: [],
                    months: []
                }
            },
            loading: false,
            gameLoading: false
        }
    },
    mounted () {
        document.querySelector(`#${this.id}`).style.width = `${document.querySelector('.account-info-bottom').getBoundingClientRect().width}px`
        this.initEcharts()
    },
    methods: {
        typeChange (value) {
            if (value === 'earnings') {
                this.typeValue = '收益'
            } else if (value === 'count') {
                this.typeValue = '次数'
            } else {
                this.typeValue = '时长'
            }
            this.myChart.setOption({
                title: {
                    text: `${this.typeValue}折线图`,
                    left: 'center'
                },
                series: [
                    {
                        name: this.typeValue,
                        data: this.echartsXData[this.typeSelectValue][this.timeSelectValue]
                    }
                ]
            })
        },
        timeChange (val) {
            this.myChart.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartsX[this.timeSelectValue]
                },
                series: [
                    {
                        name: this.typeValue,
                        data: this.echartsXData[this.typeSelectValue][this.timeSelectValue]
                    }
                ]
            })
        },
        initEcharts () {
            this.formatX()
            let echarts = require('echarts')
            this.myChart = echarts.init(document.getElementById(`${this.id}`))
            this.myChart.setOption({
                title: {
                    text: `${this.typeValue}折线图`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartsX[this.timeSelectValue]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: this.typeValue,
                        type: 'line',
                        stack: '总量',
                        data: this.echartsXData[this.typeSelectValue][this.timeSelectValue]
                    }
                ]
            })
        },
        formatX () {
            this.item.days.map(item => {
                this.echartsX.days.push(item.name)
                this.echartsXData.earnings.days.push((item.goldEarnings / 10000).toFixed(2))
                this.echartsXData.count.days.push(item.useCount)
                this.echartsXData.time.days.push((item.useTime / 60 / 60).toFixed(2))
            })
            this.item.weeks.map(item => {
                this.echartsX.weeks.push(item.name)
                this.echartsXData.earnings.weeks.push((item.goldEarnings / 10000).toFixed(2))
                this.echartsXData.count.weeks.push(item.useCount)
                this.echartsXData.time.weeks.push((item.useTime / 60 / 60).toFixed(2))
            })
            this.item.months.map(item => {
                this.echartsX.months.push(item.name)
                this.echartsXData.earnings.months.push((item.goldEarnings / 10000).toFixed(2))
                this.echartsXData.count.months.push(item.useCount)
                this.echartsXData.time.months.push((item.useTime / 60 / 60).toFixed(2))
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .account-report-top {
        display: flex;
        padding: 0 6px;
        justify-content: space-between;
    }
    .account-info-bottom {
        position: relative;
        width: 80%;
        height: 400px;
        margin: 0 auto;
        margin-top: 50px;
        .type-select {
            position: absolute;
            left: 20px;
            z-index: 1;
        }
        .time-select {
            position: absolute;
            right: 20px;
            z-index: 1;
        }
        /deep/.el-input__inner {
            border: none;
            border-bottom: 1px solid #DCDFE6;
            border-radius: 0;
        }
        .echarts {
            position: relative;
            width: 100%;
            height: 300px;
        }
    }
    .info-title {
        font-size: 12px;
        color: #9ba0b1;
        font-weight: 600;
    }
    .info-con {
        margin: 5px 0;
        font-size: 14px;
        color: #393939;
        font-weight: 500;
    }
</style>
